<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  
    <meta name="keywords" content="前端,Vue.js,JavaScript,Node.js,小程序">
  
  
    <meta name="description" content="GuoYou.Li(李国有)的博客, 用于做学习过程中的笔记、总结以及知识分享">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    uni-app 的 video 组件的使用 |
    
    种子的信仰</title>
  
    <link rel="shortcut icon" href="/your/favicon.ico">
  
  
<link rel="stylesheet" href="/your/css/style.css">

  
    
<link rel="stylesheet" href="/your/fancybox/jquery.fancybox.min.css">

  
  
<script src="/your/js/pace.min.js"></script>

<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/your/atom.xml" title="种子的信仰" type="application/atom+xml">
</head>

<body>
<main class="content">
  <section class="outer">
  <article id="post-uni-app-video-example" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

    <div class="article-inner">
        
            <header class="article-header">
                
  
    <h1 class="article-title" itemprop="name">
      uni-app 的 video 组件的使用
    </h1>
  
  




            </header>
            

                
                    <div class="article-meta">
                        <a href="/your/2020/08/29/uni-app-video-example/" class="article-date">
  <time datetime="2020-08-29T15:03:08.000Z" itemprop="datePublished">2020-08-29</time>
</a>
                            
                    </div>
                    

                        
                            
    <div class="tocbot"></div>





                                

                                    <div class="article-entry" itemprop="articleBody">
                                        


                                            

                                                
                                                                    <h2 id="一-相关介绍"><a href="#一-相关介绍" class="headerlink" title="一.相关介绍"></a>一.相关介绍</h2><h3 id="1-属性"><a href="#1-属性" class="headerlink" title="1.属性"></a>1.属性</h3><table>
<thead>
<tr>
<th>属性名</th>
<th>注解</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td><code>id</code></td>
<td>用于创建并返回 video 上下文 <code>videoContext</code> 对象;</td>
<td></td>
</tr>
<tr>
<td><code>src</code></td>
<td>要播放视频的资源地址;</td>
<td></td>
</tr>
<tr>
<td><code>controls</code></td>
<td>是否显示默认播放控件（播放/暂停按钮、播放进度、时间）;</td>
<td></td>
</tr>
<tr>
<td><code>autoplay</code></td>
<td>是否自动播放, 默认 false;</td>
<td></td>
</tr>
<tr>
<td><code>show-center-play-btn</code></td>
<td>是否显示视频中间的播放按钮;</td>
<td></td>
</tr>
<tr>
<td><code>object-fit</code></td>
<td>当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖;</td>
<td></td>
</tr>
<tr>
<td><code>poster</code></td>
<td>视频封面的图片网络资源地址，如果 controls 属性值为 false, 则设置 poster 无效(官网说明, 实际上我测试是有效的?);</td>
<td></td>
</tr>
<tr>
<td><code>:custom-cache=&quot;false&quot;</code></td>
<td>解决 video 组件播放会卡顿、绿屏,尤其是在快进、拖动时间条时;</td>
<td></td>
</tr>
<tr>
<td><code>show-mute-btn</code></td>
<td>是否显示静音按钮;</td>
<td>不支持 <code>H5</code></td>
</tr>
<tr>
<td><code>muted</code></td>
<td>是否静音播放; <strong>需要自定义按钮操作静音时, 必须在组件写上 muted 属性</strong>;</td>
<td></td>
</tr>
<tr>
<td><code>x5-video-player-type=&quot;h5&quot;</code></td>
<td>防止微信内置浏览器强制调用原生播放器播放; 如果没有设置这个, <code>:controls=&quot;false&quot;</code> 不起作用;</td>
<td></td>
</tr>
<tr>
<td><code>direction</code></td>
<td>设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）;</td>
<td>不支持 <code>H5</code></td>
</tr>
<tr>
<td><code>play-btn-position</code></td>
<td>播放按钮的位置, 默认 bottom;</td>
<td>不支持 <code>H5</code></td>
</tr>
<tr>
<td><code>show-progress</code></td>
<td>显示进度, 默认 true;</td>
<td></td>
</tr>
<tr>
<td><code>show-fullscreen-btn</code></td>
<td>是否显示全屏按钮, 默认 true;</td>
<td></td>
</tr>
<tr>
<td><code>enable-progress-gesture</code></td>
<td>是否开启控制进度的手势, 默认 true;</td>
<td></td>
</tr>
</tbody></table>
<h3 id="2-事件"><a href="#2-事件" class="headerlink" title="2.事件"></a>2.事件</h3><ul>
<li><p><code>@play</code>: 当开始/继续播放时触发play事件;</p>
</li>
<li><p><code>@ended</code>: 当播放到末尾时触发 ended 事件;</p>
</li>
<li><p><code>@error</code>: 视频播放出错时触发;</p>
</li>
<li><p><code>@fullscreenchange</code>: 当视频进入和退出全屏时触发，<code>event.detail = {fullScreen, direction}</code>，direction取为 vertical 或 horizontal;</p>
</li>
</ul>
<h3 id="3-方法"><a href="#3-方法" class="headerlink" title="3.方法"></a>3.方法</h3><ul>
<li><code>pause()</code>:</li>
<li><code>play()</code>:</li>
<li><code>requestFullScreen()</code>:</li>
</ul>
<h2 id="二-代码示例"><a href="#二-代码示例" class="headerlink" title="二.代码示例"></a>二.代码示例</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- video 组件使用示例 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">video</span></span></span><br><span class="line"><span class="tag">  <span class="attr">id</span>=<span class="string">"videoWrap"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">class</span>=<span class="string">"video-wrap"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:src</span>=<span class="string">"videoData.videoUrl"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:controls</span>=<span class="string">"isControls"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:show-center-play-btn</span>=<span class="string">"false"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">object-fit</span>=<span class="string">"contain"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:poster</span>=<span class="string">"videoData.imageUrl"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:custom-cache</span>=<span class="string">"false"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">show-mute-btn</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:muted</span>=<span class="string">"isMuted"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">x5-video-player-type</span>=<span class="string">"h5"</span></span></span><br><span class="line"><span class="tag">  @<span class="attr">play</span>=<span class="string">"onStartPlay"</span></span></span><br><span class="line"><span class="tag">  @<span class="attr">ended</span>=<span class="string">"handleEnded"</span></span></span><br><span class="line"><span class="tag">  @<span class="attr">error</span>=<span class="string">"videoErrorCallback"</span></span></span><br><span class="line"><span class="tag">  @<span class="attr">fullscreenchange</span>=<span class="string">"fullscreenchange"</span></span></span><br><span class="line"><span class="tag">&gt;</span><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 控制按钮 - 播放 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">v-if</span>=<span class="string">"!isPlaying"</span> @<span class="attr">tap</span>=<span class="string">"handlePlay"</span>&gt;</span><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 控制按钮 - 暂停 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">v-else</span> @<span class="attr">tap</span>=<span class="string">"handlePause"</span>&gt;</span><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 音量开关 - 取消静音 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">v-if</span>=<span class="string">"isMuted"</span> @<span class="attr">tap</span>=<span class="string">"setIsMuted(false)"</span>&gt;</span><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 音量开关 - 静音 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">v-else</span> @<span class="attr">tap</span>=<span class="string">"setIsMuted(true)"</span>&gt;</span><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 点击遮罩 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">"mask"</span> @<span class="attr">click.stop</span>=<span class="string">"requestFullScreen"</span>&gt;</span><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="comment">// 正在播放</span></span><br><span class="line">      isPlaying: <span class="literal">false</span>,</span><br><span class="line">      <span class="comment">// 静音</span></span><br><span class="line">      isMuted: <span class="literal">false</span>,</span><br><span class="line">      <span class="comment">// 控制条</span></span><br><span class="line">      isControls: <span class="literal">true</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    <span class="comment">// 更多请查找官方文档 https://uniapp.dcloud.io/api/media/video-context</span></span><br><span class="line">    <span class="comment">// 创建并返回 video 上下文 videoContext 对象。</span></span><br><span class="line">    <span class="comment">// 在自定义组件下，第二个参数传入组件实例 this，以操作组件内 &lt;video&gt; 组件。</span></span><br><span class="line">    <span class="keyword">this</span>.videoContext = uni.createVideoContext(<span class="string">"videoWrap"</span>, <span class="keyword">this</span>);</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 方法</span></span><br><span class="line">  methods: &#123;</span><br><span class="line">    <span class="comment">// 播放视频</span></span><br><span class="line">    handlePlay() &#123;</span><br><span class="line">      <span class="keyword">this</span>.isPlaying = <span class="literal">true</span>;</span><br><span class="line">      <span class="comment">// 调用 play() 必须使用 uni.createVideoContext 创建 video</span></span><br><span class="line">      <span class="keyword">this</span>.videoContext.play();</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 暂停视频</span></span><br><span class="line">    handlePause() &#123;</span><br><span class="line">      <span class="keyword">this</span>.isPlaying = <span class="literal">false</span>;</span><br><span class="line">      <span class="comment">// 调用 pause() 必须使用 uni.createVideoContext 创建 video</span></span><br><span class="line">      <span class="keyword">this</span>.videoContext.pause();</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 设置静音</span></span><br><span class="line">    setIsMuted(val) &#123;</span><br><span class="line">      <span class="keyword">this</span>.isMuted = val;</span><br><span class="line">      <span class="comment">// 注意: 必须在组件写上 muted 属性</span></span><br><span class="line">      <span class="keyword">this</span>.videoContext.muted = val;</span><br><span class="line">    &#125;,</span><br><span class="line">      </span><br><span class="line">    <span class="comment">// 开始播放</span></span><br><span class="line">    onStartPlay() &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'开始播放'</span>);</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 播放结束</span></span><br><span class="line">    handleEnded() &#123;</span><br><span class="line">      <span class="keyword">this</span>.isPlaying = <span class="literal">false</span>;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 播放错误</span></span><br><span class="line">    videoErrorCallback(e) &#123;</span><br><span class="line">      uni.showToast(&#123;</span><br><span class="line">        title: <span class="string">`视频播放错误信息:<span class="subst">$&#123;e.target.errMsg&#125;</span>`</span>,</span><br><span class="line">        duration: <span class="number">2000</span>,</span><br><span class="line">        icon: <span class="string">"none"</span>,</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 全屏</span></span><br><span class="line">    requestFullScreen() &#123;</span><br><span class="line">      <span class="keyword">this</span>.videoContext.requestFullScreen();</span><br><span class="line">    &#125;,</span><br><span class="line">      </span><br><span class="line">    <span class="comment">// 全屏监听</span></span><br><span class="line">    fullscreenchange(e) &#123;</span><br><span class="line">      <span class="keyword">if</span> (e.detail.fullScreen) &#123;</span><br><span class="line">        <span class="comment">// 全屏</span></span><br><span class="line">        <span class="keyword">this</span>.videoContext.play();</span><br><span class="line">        <span class="keyword">this</span>.isControls = <span class="literal">true</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 退出全屏</span></span><br><span class="line">        <span class="comment">// this.videoContext.pause();</span></span><br><span class="line">        <span class="keyword">this</span>.isControls = <span class="literal">false</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p><strong>注意事项</strong></p>
<p>所有的属性, 事件, 方法都应在 <code>H5</code> 和微信小程序端测试一遍兼容性, 文档还算全面, 可以参考</p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://uniapp.dcloud.io/component/video" target="_blank" rel="noopener">video - uni-app 官网</a></p>
<p><a href="https://uniapp.dcloud.io/api/media/video-context" target="_blank" rel="noopener">视频组件控制 API - uni-app 官网</a></p>

                                                                        
                                    </div>
                                    <footer class="article-footer">
                                        <!-- 注释 - 分享按钮 -->
                                        <!-- <a data-url="http://liguoyou.gitee.io/your/2020/08/29/uni-app-video-example/" data-id="cl0gvpjqx0013m4on52atg8sn" class="article-share-link">
                                            分享
                                        </a> -->
                                        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/uni-app/" rel="tag">uni-app</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/video/" rel="tag">video</a></li></ul>

                                    </footer>

    </div>

    
        
  <nav class="article-nav">
    
      <a href="/your/2021/09/05/weixin-slot-bug/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            微信小程序 slot 位置错乱导致样式布局无效的解决方案
          
        </div>
      </a>
    
    
      <a href="/your/2020/08/20/uni-app-display-flex-v-show-invalid/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">uni-app 给 view 设置 display:flex 后, v-show=&#34;false&#34; 在微信小程序中失效</div>
      </a>
    
  </nav>


            

                
                    
                        
  <div class="gitalk" id="gitalk-container"></div>
  <p style="color: #999; font-size: 12px; text-align: center;">
    第三方评论系统 -- Gitalk: 偶尔可能出现加载失败的情况, 您可以选择刷新或者前往 
    <a href="https://github.com/liguoyou/your/issues" target="_blank">issues</a>
    提交和查看评论
  </p>
  
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

  
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

  
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '2e731d2b04096a7c71ab',
      clientSecret: '41e2e15eb8edebd8efd5a6da558a44d60f33468a',
      repo: 'your',
      owner: 'liguoyou',
      admin: ['liguoyou'],
      // id: location.pathname,      // Ensure uniqueness and length less than 50
      id: md5(location.pathname),
      distractionFreeMode: false,  // Facebook-like distraction free mode
      pagerDirection: 'last'
    })

  gitalk.render('gitalk-container')
  </script>

                            

</article>
</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
    <li><i class="fe fe-bookmark"></i> <span id="busuanzi_value_page_pv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2022 种子的信仰</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a href="https://github.com/zhwangart/hexo-theme-ocean" target="_blank" rel="noopener">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/your/"><img src="/your/images/logo.png" alt="种子的信仰"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/">首页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/archives">时间轴</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/categories">分类</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/tags">标签</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/your/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="请输入关键词...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>

<script src="/your/js/jquery-2.0.3.min.js"></script>


<script src="/your/js/jquery.justifiedGallery.min.js"></script>


<script src="/your/js/lazyload.min.js"></script>


<script src="/your/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/your/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/your/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>


<script src="/your/js/ocean.js"></script>


</body>
</html>